<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .password-container {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: white;
    display: flex;
  }

  #reset-password-form {
    position: absolute;
    left: 10%;
    width: 420px;
    padding: 20px;
    margin-top: 20px;
    /* 添加边框样式 */
    border-radius: 5px;
  }

  .input-container {
    display: flex;
    justify-content: flex-start;
  }

  .input-container span {
    font-size: 14px;
    color: #6c6a6a;
    width: 100px;
    margin-top: 10px;
    margin-right: 30px;
  }

  /* 为标签添加间距 */
  #reset-password-form label {
    margin-bottom: 10px;
  }

  #reset-password-form input {
    width: 300px;
    padding: 10px; /* 添加内边距 */
    margin-bottom: 10px; /* 添加与下一个输入框的间距 */
    box-sizing: border-box;
  }

  #reset-password-form .code {
    width: 90%;
    padding: 10px; /* 添加内边距 */
    margin-bottom: 20px; /* 添加与下一个输入框的间距 */
    box-sizing: border-box;
  }

  .code-container {
    display: flex;
    justify-content: flex-start;
  }

  .code-container span {
    font-size: 14px;
    color: #6c6a6a;
    width: 100px;
    margin-top: 10px;
    margin-right: 19px;
  }

  #imgCode {
    width: 112px;
    height: 36px;
  }

  .reset-password-btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* 为按钮添加样式 */
  .reset-password-btn {
    width: 50%; /* 宽度占满父容器 */
    padding: 10px; /* 添加内边距 */
    background-color: #3498db;
    color: white; /* 设置文本颜色 */
    border: none; /* 去除边框 */
    border-radius: 5px; /* 设置边框圆角 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
  }

  /* 当鼠标悬停在按钮上时改变背景颜色 */
  .reset-password-btn:hover {
    background-color: #0c83ff;
  }
</style>

<div class="password-container">
  <form id="reset-password-form">
    <div class="input-container">
      <span>旧密码:</span>
      <label>
        <input name="pastPwd" required placeholder="请输入旧密码" autocomplete="off">
      </label>
    </div>
    <div class="input-container">
      <span>新密码:</span>
      <label>
        <input type="password" name="newPwd" required id="newPwd" placeholder="请输入新密码">
      </label>
    </div>

    <div class="input-container">
      <span>确认新密码:</span>
      <label>
        <input type="password" name="confirmPwd" required id="confirmPwd" placeholder="请确认新密码">
      </label>
    </div>

    <div class="code-container">
      <span>验证码:</span>
      <label>
        <input class="code" name="code" required placeholder="输入验证码">
      </label>
      <img src="" alt="验证码图片" id="imgCode" onclick="changeImg()">
    </div>
    <div class="reset-password-btn-container">
      <button class="reset-password-btn" type="submit" onclick="resetPwd()">提交</button>
    </div>
  </form>
</div>

<script>
  changeImg()

  document.getElementById('reset-password-form').addEventListener('submit', function (event) {
    event.preventDefault() // 阻止默认提交行为
  })

  function changeImg() {
    var codeImg = document.getElementById('imgCode')
    codeImg.src = 'code' + "?" + new Date().getTime()
  }

  // 检查两次密码是否一致
  function checkPwd() {
    var newPwd = document.getElementById('newPwd').value;
    var confirmPwd = document.getElementById('confirmPwd').value;


    if (newPwd === '' || confirmPwd === '') {
      alert('密码不能为空，请重新输入！');
      return false;
    }
    if (newPwd !== confirmPwd) {
      alert('两次密码不一致，请重新输入！');
      return false;
    }
    return true;
  }

  function resetPwd() {
    var form = document.getElementById('reset-password-form');
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    if (checkPwd()) {
      xhr.open('POST', 'account?type=3', true)
    }
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var res = xhr.response
        if (res.msg === '密码修改成功') {
          window.location.href = 'Index.jsp'
        } else {
          alert(res.msg)
        }
      }
    }

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.responseType = 'json'
    xhr.send("pastPwd=" + formData.get('pastPwd') + "&newPwd=" + formData.get('newPwd') + "&confirmPwd=" + formData.get('confirmPwd') + "&code=" + formData.get('code'));
  }
</script>